<template>
  <div>
    <n-space vertical>
      <n-radio-group v-model:value="value" name="radiobuttongroup2" size="medium">
        <n-radio-button v-for="song in songs" :key="song.value" :value="song.value">
          {{ song.label }}
        </n-radio-button>
      </n-radio-group>
    </n-space>
    <Versions />
    <div class="App">Electron-Vite-Vue-App</div>
    <n-space>
      <n-button>Default</n-button>
      <n-button type="tertiary" @click="goHome"> Tertiary</n-button>
      <n-button type="primary"> Primary</n-button>
      <n-button type="info"> Info</n-button>
      <n-button type="success"> Success</n-button>
      <n-button type="warning"> Warning</n-button>
      <n-button type="error"> Error</n-button>
    </n-space>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import Versions from '../../components/Versions.vue'

const router = useRouter()

function goHome() {
  router.push({ path: '/about' })
}
const value = ref("")
const songs = ref([
  {
    value: "Rock'n'Roll Star",
    label: "Rock'n'Roll Star"
  },
  {
    value: 'Shakermaker',
    label: 'Shakermaker'
  },
  {
    value: 'Live Forever',
    label: 'Live Forever'
  },
  {
    value: 'Up in the Sky',
    label: 'Up in the Sky'
  }
])
</script>

<style scoped></style>
